﻿<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<title>胜利的纸牌</title>
		<style type="text/css">

			body {
				color: #ffffff;
				background-color: #008000;
				margin: 0px;
				cursor: pointer;
				overflow: hidden;
			}

		</style>
	</head>
	<body>

		<script type="text/javascript">
		  var _gaq = _gaq || [];
		  _gaq.push(['_setAccount', 'UA-86951-7']);
		  _gaq.push(['_trackPageview']);

		  (function() {
		    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
		  })();
		</script>

		<script>

			var info = document.createElement( 'div' );
			info.style.position = 'absolute';
			info.style.top = '10px';
			info.style.width = '100%';
			info.style.fontFamily = 'Monospace';
			info.style.textAlign = 'center';
			info.innerHTML = '点击就胜利啦!';
			document.body.appendChild( info );

			var canvas = document.createElement( 'canvas' );
			canvas.style.position = 'absolute';
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
			document.body.appendChild( canvas );

			var context = canvas.getContext( '2d' );

			var id = 52;

			var cwidth = 71, cwidthhalf = cwidth / 2;
			var cheight = 96, cheighthalf = cheight / 2;

			var particles = [];

			var Particle = function ( id, x, y, sx, sy ) {

				if ( sx === 0 ) sx = 2;

				var cx = ( id % 4 ) * cwidth;
				var cy = Math.floor( id / 4 ) * cheight;

				this.update = function () {

					x += sx;
					y += sy;

					if ( x < ( - cwidthhalf ) || x > ( canvas.width + cwidthhalf ) ) {

						var index = particles.indexOf( this );
						particles.splice( index, 1 );

						return false;

					}

					if ( y > canvas.height - cheighthalf ) {

						y = canvas.height - cheighthalf;
						sy = - sy * 0.85;

					}

					sy += 0.98;

					context.drawImage( image, cx, cy, cwidth, cheight, Math.floor( x - cwidthhalf ), Math.floor( y - cheighthalf ), cwidth, cheight	);

					return true;

				}

			}

			var image = document.createElement( 'img' );
			image.src = "";

			var throwCard = function ( x, y ) {

				id > 0 ? id -- : id = 51;

				var particle = new Particle( id, x, y, Math.floor( Math.random() * 6 - 3 ) * 2, - Math.random() * 16 );
				particles.push( particle );

			}

			document.addEventListener( 'mousedown', function ( event ) {

				event.preventDefault();

				document.addEventListener( 'mousemove', onMouseMove, false );

			}, false );

			document.addEventListener( 'mouseup', function ( event ) {

				event.preventDefault();

				throwCard( event.clientX, event.clientY );

				document.removeEventListener( 'mousemove', onMouseMove, false );

			}, false );

			function onMouseMove( event ) {

				event.preventDefault();

				throwCard( event.clientX, event.clientY );

			}

			document.addEventListener( 'touchstart', function ( event ) {

				event.preventDefault();

				for ( var i = 0; i < event.changedTouches.length; i ++ ) {

					throwCard( event.changedTouches[ 0 ].pageX, event.changedTouches[ 0 ].pageY );

				}

			}, false );

			document.addEventListener( 'touchmove', function ( event ) {

				event.preventDefault();

				for ( var i = 0; i < event.touches.length; i ++ ) {

					throwCard( event.touches[ i ].pageX, event.touches[ i ].pageY );

				}

			}, false );

			setInterval( function () {

				var i = 0, l = particles.length;

				while ( i < l ) {

					particles[ i ].update() ? i ++ : l --;

				}

			}, 1000 / 60 );

		</script>
	</body>
</html>
